<template>
  <div class="w-full h-full flex flex-col justify-center items-center bg-black">
    <div>
      <i class="iconfont icon-mac text-large text-white"></i>
    </div>
    <div class="w-80 h-1 bg-gray-500">
      <div class="h-full bg-white" :style="{width: `${progress}%`}"></div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'

  const emit = defineEmits(['loaded'])

  const progress = ref(0)

  onMounted(() => {
    const timer = setInterval(() => {
      const randV = Math.floor(Math.random() * 10)
      if (progress.value + randV >= 100) {
        progress.value = 100
        clearInterval(timer)
        emit('loaded')
      } else {
        progress.value += randV
      }
    }, 200)
  })

</script>
